<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="framework/reset.css" rel="stylesheet">
    <link href="framework/icons/tdesign.css" rel="stylesheet">
    <link href="css/wrapper.css" rel="stylesheet">
    <link href="css/top.css" rel="stylesheet">
    <link href="css/footer.css" rel="stylesheet">
    <script src="js/fixTop.js"></script>

    <link href="css/secure.css" rel="stylesheet">
    <script src="js/Pop.js"></script>
    <script src="js/token-count-down.js"></script>
    <title>STEAM令牌</title>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="top-area">
                <div class="top-area-fix" id="fixedBox">
                    <!-- top部分 -->
                    <div class="top">
                        <div class="return" onclick="location.href='shop.html'">
                            <i class="i tdesign:chevron-left"></i>
                        </div>
                        <div class="top-title">
                            <p>STEAM 令牌</p>
                        </div>
                        <div class="user_head" onclick="location.href='userInfo.html'">
                            <img src="img/user_head.jpg">
                        </div>
                    </div>
                </div>
            </div>

            <!-- secure部分 -->
            <div class="securePart">
                <div class="securePart-title">
                    <p>输入此代码，确认您用以下身份登录：</p>
                </div>

                <div class="user-choose"  onclick="showPopup1()">
                    <div class="user-head">
                        <img src="img/user_head.jpg">
                    </div>
                    <div class="user-name">
                        <p>User</p>
                        <p>233333</p>
                    </div>
                    <div class="more">
                        <i class="i tdesign:chevron-down"></i>
                    </div>
                </div>
                <div class="popmenu1">
                    <div class="popup">
                        <div class="i tdesign:chevron-down-double-s" onclick="hidePopup1()"></div> <!--关闭弹窗-->
                        <div class="popup_btn">
                            <button class="cur-account" onclick="hidePopup1()"  style="border-top: none">
                                <img src="img/user_head.jpg">
                                <div class="info">
                                    <p>User</p>
                                    <p>233333</p>
                                </div>
                                <div class="secured">
                                    <i class="i tdesign:secured"></i>
                                </div>
                            </button>
                            <button class="add-account">
                                <div class="i tdesign:add"></div>
                                <span>添加账户</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="token">
                    <div class="token-explain">
                        <p>安全注意事项：</p>
                        <p>只有在您的手机无法访问互联网时才需输入代码。</p>
                        <p>永远不要把您的代码给另一个用户或网站。</p>
                    </div>
                    <div class="token-show" onclick="hideToken(), showToken()">
                        显示 Steam 令牌验证码
                    </div>
                </div>
                <div class="code-box">
                    <div class="token-count-down">
                        <div class="circle-box">
                            <div class="circle">
                                <div class="half-circle left"></div>
                            </div>
                            <div class="circle">
                                <div class="half-circle right"></div>
                            </div>
                        </div>
                    </div>
                    <div class="token-count-down">
                        <div class="token-writeCode">
                            <p id="input"></p> <!--放在前面防止TypeError: Cannot set properties of null-->
                            <script>
                                document.getElementById('input').innerHTML = getRandomString(5);
                                function writeCode() {
                                    let result = getRandomString(5); // 调用函数并将返回值存储在变量中
                                    document.getElementById('input').innerHTML = result; // 将返回的变量输出到HTML主体
                                }
                                setInterval("writeCode()","20100");
                            </script>
                            <p>轻击以复制</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <ul class="footer">
            <li  class="shop" onclick="location.href='shop.html'">
                <i class="i tdesign:discount-filled"></i>
            </li>
            <li class="news">
                <i class="i tdesign:article"></i>
            </li>
            <li class="secure" onclick="location.href='secure.html'">
                <i class="i tdesign:shield-error"></i>
            </li>
            <li class="notification">
                <i class="i tdesign:notification-filled"></i>
            </li>
            <li class="user" onclick="location.href='user.html'">
                <i class="i tdesign:view-list"></i>
            </li>
        </ul>
    </div>
</body>
</html>